<template>
  <el-container>
    <el-aside width="220px">
      <h1>浙江车检检汽车服务有限公司</h1>
      <el-avatar
        :size="80"
        src="https://cartest.zjcjj.net/logo.png"
      ></el-avatar>
      <p>
        欢迎您:{{ current.username }}
        <span class="el-icon-switch-button" @click="clear"></span>
      </p>

      <el-menu router>
        <el-submenu :index="item.path" v-for="item in menu" :key="item.path">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>

          <el-menu-item
            :index="items.path"
            v-for="items in item.children"
            :key="items.path"
          >
            <i :class="items.icon"></i>
            {{ items.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-main>
      <router-view v-if="show"></router-view>
    </el-main>
  </el-container>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      menu: {},
      show:true
    };
  },
  computed: {
    ...mapState(["current"]),
  },
  methods: {
    ...mapMutations(["clearcurrent"]),
    clear() {
      this.clearcurrent();
      localStorage.removeItem("current");
      this.$router.push('/login')
    },
    reload(){
      this.show = false
      this.$nextTick(()=>{
        this.show = true
      })
    }
  },
  mounted() {
    this.$http.post("/sysUser/getUserMenus", this.current).then((res) => {
      // console.log(res);
      this.menu = res.data.object;
    });
  },
};
</script>


<style lang="scss" scoped>
.el-container {
  background-color: #f6fafd;
  height: 100%;
  .el-aside {
    box-shadow: 0px 0px 40px 0px rgba(2, 25, 35, 0.1);
    padding: 0 12px;
    h1 {
      margin-top: 30px;
      font-weight: 400;
    }
    .el-avatar {
      margin: 32px 0 22px;
    }
    p {
      font-size: 18px;
    }
  }
}
</style>

<style lang="scss">
.el-menu .is-opened {
  background: linear-gradient(0deg, #57b7e3, #5798e3);
  border-radius: 4px;
}
</style>
